<template>
  <view class="page">
		<!-- header 开始 -->
		<view class="header">
			<!-- locationName 开始 -->
			<view class="locationName">
				<uni-icons type="location-filled" size="18" color="blue"></uni-icons>
				<text>石家庄</text>
			</view>
			<!-- locationName 结束 -->
			<!-- 搜索框开始 -->
			<view class="uni-search-bar">
				<uni-search-bar placeholder="请输入关键字进行查找" cancel-button="none" radius="100"/>
			</view>
			<!-- 搜索框结束 -->
		</view>
		<!-- header 结束 -->
		<!-- 首页分类开始 -->
		<view class="classify_wrap">
			<!-- 横向分类滚动开始 -->
			<view class="classify_scroll_x">
				<scroll-view scroll-x="true" >
					<view class="segmented-wrap">
						<uni-segmented-control :current="current" :values="classify" @clickItem="onClickItem" styleType="text" activeColor="#CC0000"></uni-segmented-control>
					</view>
				</scroll-view>
			</view>
			<!-- 横向分类滚动结束 -->
			<!-- 分类 icon 开始 -->
			<view class="classify_icon">
				<uni-icons type="list" size="28" color="gray" @click="goToGrid"></uni-icons>
			</view>
			<!-- 分类 icon 结束 -->
		</view>
		<!-- 首页分类结束 -->
		<!-- 首页轮播图开始 -->
		<view class="uni-margin-wrap">
			<unicloud-db v-slot:default="{data, loading, error, options}" collection="opendb-banner">
				<view v-if="error">{{error.message}}</view>
				<view v-else>
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
					  <swiper-item v-for="(item, index) in data" :key="item._id">
					    <view class="swiper-item">
					      <image class="banner-image" :src="item.bannerfile.url" mode="aspectFill" :draggable="false" />
					    </view>
					  </swiper-item>
					</swiper>
				</view>
			</unicloud-db>
		</view>
		<!-- 首页轮播图结束 -->
		<view class="content">
			<view v-if="current === 0">
				<!-- 会员权益开始 -->
				<view class="vip-wrap">
					<uni-card title="会员权益" :thumbnail="vipIcon" margin="5px">
						<uni-grid :column="column" :show-border="false" :square="false">
							<uni-grid-item v-for="(item, index) in vipItem">
								<view class="grid-item-box">
									<image :src="item.icon" style="width: 60rpx; height: 60rpx;" mode="aspectFill"></image>
									<text>{{ item.text }}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</uni-card>
				</view>
				<!-- 会员权益结束 -->
				<!-- 书籍列表开始 -->
				<view class="bookList">
					<unicloud-db v-slot:default="{data, loading, error, options}" collection="sunshine-book">
						<view v-if="error">{{error.message}}</view>
						<view v-else>
							<uni-list>
								<uni-list-item v-for="(item, index) in data">
									<template v-slot:header>
										<view class="slot-box">
											<image class="slot-image" :src="item.coverImage.url" mode="widthFix"></image>
										</view>
									</template>
									<template v-slot:body>
									    <view class="bookName">
									      <text>{{item.bookName}}</text>
									    </view>
									    <view class="author">
									      <text>作者 | {{ item.author }}</text>
									      <text>出版社 | {{ item.publisher }}</text>
									    </view>
									    <view class="price">
									      <text class="cheapPrice">¥ {{ getYuan(item.cheapPrice) }}</text>
									      <text>&nbsp;</text>
									      <text class="bookPrice"> ¥ {{ getYuan(item.price) }}</text>
									    </view>
									</template>
								</uni-list-item>
							</uni-list>
						</view>
					</unicloud-db>
				</view>
				<!-- 书籍列表结束 -->
			</view>
			<view v-if="current === 1">
				<!-- 儿童类列表开始 -->
				<view class="bookList">
					<unicloud-db v-slot:default="{data, loading, error, options}" collection="sunshine-book" where="classify=='儿童'">
						<view v-if="error">{{error.message}}</view>
						<view v-else>
							<uni-list>
								<uni-list-item v-for="(item, index) in data">
									<template v-slot:header>
										<view class="slot-box">
											<image class="slot-image" :src="item.coverImage.url" mode="widthFix"></image>
										</view>
									</template>
									<template v-slot:body>
									    <view class="bookName">
									      <text>{{item.bookName}}</text>
									    </view>
									    <view class="author">
									      <text>作者 | {{ item.author }}</text>
									      <text>出版社 | {{ item.publisher }}</text>
									    </view>
									    <view class="price">
									      <text class="cheapPrice">¥ {{ getYuan(item.cheapPrice) }}</text>
									      <text>&nbsp;</text>
									      <text class="bookPrice"> ¥ {{ getYuan(item.price) }}</text>
									    </view>
									</template>
								</uni-list-item>
							</uni-list>
						</view>
					</unicloud-db>
				</view>
				<!-- 儿童类列表结束 -->
			</view>
			<view v-if="current === 2">
				<!-- 教辅类列表开始 -->
				<view class="bookList">
					<unicloud-db v-slot:default="{data, loading, error, options}" collection="sunshine-book" where="classify=='教辅'">
						<view v-if="error">目前该分类没有书籍</view>
						<view v-else>
							<uni-list>
								<uni-list-item v-for="(item, index) in data">
									<template v-slot:header>
										<view class="slot-box">
											<image class="slot-image" :src="item.coverImage.url" mode="widthFix"></image>
										</view>
									</template>
									<template v-slot:body>
									    <view class="bookName">
									      <text>{{item.bookName}}</text>
									    </view>
									    <view class="author">
									      <text>作者 | {{ item.author }}</text>
									      <text>出版社 | {{ item.publisher }}</text>
									    </view>
									    <view class="price">
									      <text class="cheapPrice">¥ {{ getYuan(item.cheapPrice) }}</text>
									      <text>&nbsp;</text>
										   <text class="bookPrice"> ¥ {{ getYuan(item.price) }}</text>
										  									    </view>
										  									</template>
										  								</uni-list-item>
										  							</uni-list>
										  						</view>
										  					</unicloud-db>
										  				</view>
										  				<!-- 教辅类列表结束 -->
										  			</view>
										  		</view>
										  	</view>
										  </template>
										  
										  <script>
										    export default {
										      data() {
										        return {
										  				classify:["主页","儿童","教辅","文学社科","艺术","经管励志","考试法律","科技生活","文创"],
										  				current: 0,
										  				indicatorDots: true,
										  				autoplay: true,
										  				interval: 2000,
										  				duration: 500,
										  				column: 3,
										  				vipIcon: '/static/vip/vipIcon.png',
										  				vipItem: [
										  					{text: '购买储值卡', icon: '/static/vip/chuzhika.png'},
										  					{text: '会员签到', icon: '/static/vip/qiandao.png'},
										  					{text: '领券中心', icon: '/static/vip/lingquan.png'}
										  				],
										        }
										      },
										      methods: {
										  			getYuan(data){
										  				let yuan = Math.floor(data / 100)
										  				let fen = data % 100
										  				if(fen == 0) fen = "00"
										  				return yuan+'.'+fen
										  			},
										  			onClickItem(e) {
										  				if (this.current !== e.currentIndex) {
										  					this.current = e.currentIndex
										  				}
										  			},
										  			goToGrid(){
										  				uni.switchTab({
										  					url:'/pages/grid/grid'
										  				})
										  			},
										      }
										    }
										  </script>
										  
										  <style scoped>
										  	view {
										  		display: flex;
										  		box-sizing: border-box;
										  		flex-direction: column;
										  	}
										  	.page{
										  		background-color: #EEEEEE;
										  	}
										  	.header{
										  		display: flex;
										  		flex-direction: row;
										  		background-color: #FFFFFF;
										  	}
										  	.locationName{
										  		display: flex;
										  		flex-direction: row;
										  		height: 50px;
										  		line-height: 50px;
										  		font-size: 12px
										  	}
										  	.uni-search-bar{
										  		width: 580rpx;
										  		height: 50px;
										  	}
										  	.classify_wrap {
										  		width: 750rpx;
										  		display: flex;
										  		flex-direction: row;
										  	}
										  	.classify_scroll_x{
										  		white-space: nowrap;
										  		width: 650rpx;
										  		background-color: #FFFFFF;
										  		margin-top: 5rpx;
										  		margin-bottom: 8rpx;
										  	}
										  	.classify_icon{
										  		display: flex;
										  		flex: 1;
										  		background-color: #FFFFFF;
										  		margin-left: 3rpx;
										  		margin-top: 5rpx;
										  		margin-bottom: 8rpx;
										  		justify-content: center;
										  		text-align: center;
										  	}
										  	.segmented-wrap{
										  		width: 1200rpx;
										  	}
										  	.uni-margin-wrap{
										  		margin-top: 5rpx;
										  	}
										  	.swiper{
										  		height: 315rpx;
										  	}
										  	.banner-image {
										  		width: 750rpx;
										  		height: 315rpx;
										  	}
										  	.grid-item-box {
										  		text-align: center;
										  		justify-content: center;
										  		padding: 20rpx 0 0 0;
										  	}
										  	.grid-item-box image{
										  		margin: 0 auto;
										  	}
										  	.slot-box {
										  		display: flex;
										  		flex-direction: row;
										  		align-items: center;
										  	}
										  
										  	.slot-image {
										  		display: block;
										  		width: 240rpx;
										  		height: 240rpx;
										  	}
										  	.bookName{
										  		font-size: 30rpx;
										  		display: -webkit-box;
										  		line-height: 1.5em;
										  		-webkit-box-orient: vertical;
										  		-webkit-line-clamp: 2;
										  		overflow: hidden;
										  		text-overflow: ellipsis;
										  		margin-bottom: 5rpx;
										  	}
										  	.author{
										  		font-size: 24rpx;
										  		white-space: nowrap; /* 禁止换行 */
										  		overflow: hidden; /* 隐藏溢出内容 */
										  		text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
										  		word-break: break-all; /* 允许在单词内换行 */
										  		margin-bottom: 10rpx;
										  		color: #666666;
										  	}
										  	.price {
										  		display: flex;
										  		flex-direction: row;
										  		line-height: 40rpx;
										  	}
										  	.cheapPrice{
										  		font-size: 40rpx;
										  		color: #000000;
										  	}
										  	.bookPrice{
										  		font-size: 24rpx;
										  		color: #AAAAAA;
										  		text-decoration-line: line-through;
										  	}
										  </style>